<template>
  <div class="app-container" style="background-color: white">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
        <div style="width: 400px;float: left;">
          <div style="width: 100%;text-align: center">
            <img :src="userInfo.avatar" style="width: 150px;height: 150px;margin-top: 30px;border-radius: 50%">
            <p>{{ userInfo.introduction }}</p>
            <h1>{{ userInfo.username }}</h1>
          </div>
          <el-divider><i class="el-icon-mobile-phone"/></el-divider>
          <el-descriptions :column="2" title="用户信息" style="margin-left: 40px;width: 400px">
            <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
            <el-descriptions-item label="用户身份">{{ userInfo.roles }}</el-descriptions-item>
            <el-descriptions-item label="用户密码">******</el-descriptions-item>
            <el-descriptions-item label="性别">{{ userInfo.gender }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>
            <el-descriptions-item label="QQ">{{ userInfo.qq }}</el-descriptions-item>
            <el-descriptions-item label="邮 箱">{{ userInfo.email }}</el-descriptions-item>
            <el-descriptions-item label="职 业">{{ userInfo.occupation }}</el-descriptions-item>
            <el-descriptions-item label="居住地">{{ userInfo.address }}</el-descriptions-item>
            <el-descriptions-item label="简 介">{{ userInfo.introduction }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div>
          <el-tabs tab-position="left">
            <el-tab-pane label="修改信息">
              <el-form v-model="userForm" style="margin-left: 40px;;width: 400px;margin-top: 20px">
                <el-form-item label="用户名" >
                  <el-input v-model="userForm.username" placeholder="请输入用户名" style="width: 300px;margin-left: 14px"/>
                </el-form-item>
                <el-form-item label="联系方式">
                  <el-input v-model="userForm.phone" placeholder="请输入联系方式" style="width: 300px"/>
                </el-form-item>
                <el-form-item label="Q Q">
                  <el-input v-model="userForm.qq" placeholder="请输入QQ" style="width: 300px;margin-left: 30px"/>
                </el-form-item>
                <el-form-item label="邮 箱">
                  <el-input v-model="userForm.email" placeholder="请输入邮箱" style="width: 300px;margin-left: 25px"/>
                </el-form-item>
                <el-form-item label="性 别">
                  <el-radio-group v-model="userForm.gender" style="margin-left: 30px" >
                    <el-radio label="男"/>
                    <el-radio label="女"/>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="住 址">
                  <el-input v-model="userForm.address" placeholder="请输入住址" style="width: 300px;margin-left: 25px"/>
                </el-form-item>
                <el-form-item label="个人介绍">
                  <el-input v-model="userForm.introduction" type="textarea" placeholder="个人简介。。。" style="width: 300px;" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="updateInfo">修 改</el-button>
                  <el-button @click="resetInfo">重 置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="修改密码">
              <el-form v-model="form" style="margin-left: 40px;margin-top: 20px" class="demo-ruleForm">
                <el-form-item label="原密码">
                  <el-input v-model="form.password" show-password style="width: 300px;margin-left: 27px" placeholder="请输入原密码" />
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input v-model="form.newPassword" show-password style="width: 300px;margin-left: 27px" placeholder="请输入新密码" />
                </el-form-item>
                <el-form-item label="确认新密码">
                  <el-input v-model="form.confirmNewPassword" show-password style="width: 300px" placeholder="请再次输入新密码" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="small" @click="updatePassword">确 定</el-button>
                  <el-button size="small" style="margin-left: 30px" @click="resetPassForm">重 置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane label="报修留言" name="second">
        <el-avatar :src="userInfo.avatar" style="margin-left: 25px;"/>
        <el-input
          v-model="comment.content"
          style="width: 400px;position: absolute;left: 70px"
          autosize
          clearable
          placeholder="留言..."
          @keyup.enter.native="releaseMessage"/>
        <el-button type="primary" style="position: absolute;left: 470px" @click="releaseMessage">发布</el-button>
        <el-timeline v-model="messageList" style="margin-top: 20px">
          <el-timeline-item v-for="(message,index) in messageList" :key="index" :timestamp="message.timestamp" placement="top" >
            <el-card>
              <h4 style="margin-top: -10px"><el-avatar :src="message.avatar" size="small"/><span style="margin-top: -10px;margin-left: 10px">{{ message.content }}</span></h4>
              <p style="margin-left: 38px">{{ message.username }}发布于 {{ message.createTime }}</p>
              <el-button v-if="message.isCompleted === 0" :disabled="roles !== '系统管理员'" type="success" icon="el-icon-check" circle size="mini" style="float:right;margin-top: -20px" @click="updateCompleted(message.id)"/>
              <el-button v-if="message.isCompleted === 1" :disabled="roles !== '系统管理员'" type="danger" icon="el-icon-delete" circle size="mini" style="float:right;margin-top: -20px" @click="deleteComment(message.id)"/>
            </el-card>
          </el-timeline-item>
        </el-timeline>

        <template>
          <div class="box">
            <!-- 1. 返回顶部 -->
            <div v-show="top" class="top" @click="isTop">
              <el-button circle size="small" type="primary" icon="el-icon-top" style="position: fixed;top: 650px;right: 20px;z-index: 99;"/>
            </div>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import UserApi from '../../api/user'
import { mapGetters } from 'vuex'
import CommentApi from '../../api/comment'
export default {
  name: 'Personal',
  data() {
    return {
      top: false,
      inputVisible: false,
      inputValue: '',
      imageUrl: '',
      userInfo: {},
      userForm: {
        username: '',
        phone: '',
        gender: '男',
        qq: '',
        email: '',
        address: '',
        introduction: ''
      },
      form: {
        username: '',
        password: '',
        newPassword: '',
        confirmNewPassword: ''
      },
      leaveMessage: {
        avatar: '',
        username: '',
        content: '',
        time: '',
        timestamp: ''
      },
      comment: {},
      activeName: 'first',
      messageList: [{
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        username: '王小虎',
        content: '316寝室灯泡坏了',
        time: '2023/4/12 20:46',
        timestamp: '2023/4/12'
      }]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles',
      'token'
    ])
  },
  mounted() {
    window.addEventListener('scroll', () => { // 滚动事件
      const html = document.documentElement
      if (html.scrollTop >= 100) { // 当滚动高度大于等于100返回顶部出现
        this.top = true
      } else {
        this.top = false
      }
    })
  },
  created() {
    this.getUserInfo()
    this.getComments()
  },
  methods: {
    isTop() {
      //  document.documentElement.scrollTop=0
      const html = document.documentElement
      const timer = setInterval(() => {
        if (html.scrollTop <= 0) {
          clearInterval(timer)
        }
        html.scrollTop = html.scrollTop - 20
      }, 10)
    },
    updateCompleted(id) {
      CommentApi.updateCompleted(id).then(response => {
        this.$message.success('修改成功！')
        this.getComments()
      }).catch(() => {
        this.$message.error('修改失败！')
      })
    },
    deleteComment(id) {
      CommentApi.deleteComment(id).then(response => {
        this.$message.success('留言删除成功！')
        this.getComments()
      }).catch(() => {
        this.$message.error('留言删除失败！')
      })
    },
    getComments() {
      CommentApi.getAll().then(response => {
        this.messageList = response.data
        this.messageList.forEach((message) => {
          message.createTime = new Date(message.createTime).toLocaleString()
          message.timestamp = new Date(message.createTime).toLocaleDateString()
        })
      })
    },
    getUserInfo() {
      UserApi.getUserInfo(this.token).then(response => {
        this.userInfo = response.data
      }).catch(() => {
        this.$message.error('用户信息加载失败！')
      })
    },
    resetInfo() {
      this.userForm.username = ''
      this.userForm.qq = ''
      this.userForm.gender = ''
      this.userForm.phone = ''
      this.userForm.address = ''
      this.userForm.email = ''
    },
    updateInfo() {
      UserApi.updateInfo(this.name, this.userForm).then(response => {
        this.$message.success('修改用户信息成功！')
        this.getUserInfo()
        this.resetInfo()
      }).catch(() => {
        this.$message.error('修改用户信息失败！')
      })
    },
    resetPassForm() {
      this.form.password = ''
      this.form.newPassword = ''
    },
    releaseMessage() {
      this.comment.username = this.userInfo.username
      CommentApi.addComment(this.comment).then(response => {
        this.$message.success('发布成功！')
        this.comment.content = ''
        this.getComments()
      }).catch(() => {
        this.$message.error('发布失败，请勿重复发送！')
      })
    },
    updatePassword() {
      this.form.username = this.name
      if (this.form.newPassword === this.form.confirmNewPassword) {
        UserApi.updatePassword(this.form).then(response => {
          this.$message.success('更新密码成功！')
        }).catch(() => {
          this.$message.error('更新密码失败！')
        })
      } else {
        this.$message.warning('两次密码不一致！')
      }
    },
    handleClose(tag) {
      this.Tags.splice(this.Tags.indexOf(tag), 1)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      var inputValue = this.inputValue
      if (inputValue) {
        this.Tags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>
<style>
</style>
